<template>
  <div id="q-app">
    <q-layout view="lHh Lpr lFf">
      <q-header elevated>
        <q-toolbar>
          <q-toolbar-title> Quasar App </q-toolbar-title>
          <div>Quasar v{{ $q.version }}</div>
        </q-toolbar>
      </q-header>
      <q-page-container>
        <q-page>
          <q-toolbar>
            <q-btn @click="open">New Meetup</q-btn>
          </q-toolbar>

          <div class="q-pa-md row items-start q-col-gutter-md">
            <div class="col-6" v-for="meetup in meetups" :key="meetup.id">
              <q-card>
                <q-card-section>
                  <div class="text-h6">{{ meetup.title }}</div>
                  <div class="text-subtitle2">{{ meetup.subtitle }}</div>
                </q-card-section>
                <q-card-section style="height: 120px">
                  <div>address: {{ meetup.address }}</div>
                  <div>{{ meetup.description }}</div>
                </q-card-section>
                <q-separator />
                <q-card-actions>
                  <q-btn flat>Action 1</q-btn>
                  <q-btn flat>Action 2</q-btn>
                </q-card-actions>
              </q-card>
            </div>
          </div>

          <q-dialog v-model="show">
            <q-card style="width: 60vw">
              <q-card-section>
                <div class="text-h6">edit meetup data</div>
              </q-card-section>
              <q-card-section class="q-pt-none">
                <q-form>
                  <q-input v-model="formData.title" label="Title" />
                  <q-input v-model="formData.subtitle" label="Subtitle" />
                  <q-input v-model="formData.address" label="Address" />
                  <q-input v-model="formData.email" label="Email" />
                  <q-input v-model="formData.description" label="Description" />
                  <q-input v-model="formData.imageUrl" label="ImageUrl" />
                </q-form>
              </q-card-section>
              <q-card-actions align="right">
                <q-btn flat label="Save" color="primary" @click="save" />
                <q-btn flat label="Cancel" v-close-popup />
              </q-card-actions>
            </q-card>
          </q-dialog>
        </q-page>
      </q-page-container>
    </q-layout>
  </div>
</template>
<script>
class Meetup {
  id = "";
  title = "";
  subtitle = "";
  address = "";
  email = "";
  description = "";
  imageUrl = "";
}
export default {
  name: "App",
  data() {
    let meetups = [
      {
        id: "m1",
        title: "Coding Bootcamp",
        subtitle: "Learn to code in 2 hours",
        description:
          "In this meetup, we will have some experts that teach you how to code!",
        imageUrl: "some",
        address: "Taiji Compus",
        contactEmail: "code@test.com",
        isFavorite: false,
      },
      {
        id: "m2",
        title: "Swim Together",
        subtitle: "Let's go for some swimming",
        description: "We will simply swim some rounds!",
        imageUrl: "",
        address: "Olympic",
        contactEmail: "swim@test.com",
        isFavorite: true,
      },
    ];
    return { meetups, show: false, formData: {} };
  },
  methods: {
    open() {
      this.formData = new Meetup();
      this.show = true;
    },
    save() {
      const { formData } = this;
      const newMeetup = {
        id: Math.random().toString(),
        title: formData.title,
        subtitle: formData.subtitle,
        description: formData.description,
        imageUrl: formData.imageUrl,
        contactEmail: formData.email,
        address: formData.address,
      };

      this.meetups.push(newMeetup);
      this.show = false;
    },
  },
};
</script>
